<template>
	<div class="Home">
		<div class="container">
			<header>
				<Search class="Search"></Search>
			</header>
			<div class="banner">
				<router-link to="/Details">
					<img src="~img/home/home-banner.jpg" />
				</router-link>
			</div>
			<HomeSwiper :info="New"></HomeSwiper>
			<HomeSwiper :info="Baby"></HomeSwiper>
			<HomeSwiper :info="Beauty"></HomeSwiper>
			<HomeSwiper :info="Furniture"></HomeSwiper>
			<HomeSwiper :info="Food"></HomeSwiper>
			<HomeSwiper :info="Global"></HomeSwiper>	
			<MenuBar></MenuBar>
		</div>
	</div>
</template>

<script>
	import HomeSwiper from "./Components/HomeSwiper"
	export default{
		name:"Home",
		components:{
			HomeSwiper
		},
		data(){
			return{
				New:{},
				Baby:{},
				Beauty:{},
				Furniture:{},
				Food:{},
				Global:{}
			}
		},
		methods:{
			showInfo(){
				const that = this;
				this.$http.get("api/home.json")
				.then(function(res){
					var resData = res.data
					that.New = resData.prolist.New
					that.Baby = resData.prolist.Baby
					that.Beauty = resData.prolist.Beauty
					that.Furniture = resData.prolist.Furniture
					that.Food = resData.prolist.Food
					that.Global = resData.prolist.Global
				})
			}
		},
		mounted(){
			this.showInfo()
		}
	}
</script>

<style scoped>
	.Home .container{
		padding-bottom: 124px;
	}
	.Home header{
		width:100%;
		height: 94px;
		background: url("~img/home/home-header.jpg") no-repeat;
		background-size: 100%;
		overflow: hidden;
	}
	.Home header .Search{
		margin:0 auto;
		margin-top:20px;
	}
	.Home .banner{
		width:100%;
		height: 0;
		padding-bottom: 50.66%;
		overflow: hidden;
	}
	.Home .banner img{
		width: 100%;
	}
</style>